import React from "react";
import { Tabs } from "antd-mobile";
import classnames from "classnames";
function CatesList(props) {
  let { cates } = props;
  return (
    <Tabs className="tabs"
      tabs={cates}
      // initalPage={0}
      useOnPan={true}
      tabBarTextStyle={
        {
          width: '86px',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          backgroundColor: '#f7f7f7'
        }
      }
      renderTabBar={props => <Tabs.DefaultTabBar {...props} page={12} />}
      tabBarPosition="left"
      tabDirection="vertical"
    >
      {
        cates && cates.map((item, i) => {
          return (
            <div className="tabs-r" key={i}>
              {
                item.childs.length > 0 ? item.childs.map((jtem, j) => {
                  return (
                    <div key={j} className="tabs-r-box">
                      <div className="tabs-r-title">{jtem.name}</div>
                      <div className="tabs-r-body">
                        {
                          jtem.childs.length > 0 ? jtem.childs.map((ktem, k) => {
                            return (
                              <div key={k} className={classnames({
                                'tabs-r-item': true,
                                'flex': ktem.logo ? false : true
                              })}>
                                {
                                  ktem.logo ?
                                    <img src={`http://exotic.gzfenzu.com/${ktem.logo}`} alt="" />
                                    : null
                                }
                                {
                                  ktem.logo ?
                                    <span>{ktem.name}</span>
                                    : <span className="border">{ktem.name}</span>
                                }
                              </div>
                            )
                          })
                            : <div style={{ margin: '10px 0', textAlign: 'center', width: '100%' }}>暂无分类</div>
                        }
                      </div>
                    </div>
                  )
                })
                  : <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>暂无该分类</div>
              }
            </div>
          )
        })
      }
    </Tabs>
  );
}
export default CatesList;
